<template>
    <div>姓名：{{ name }}</div>
    <div>年龄：{{ age }}</div>
    <div>身高体重：{{ height }} | {{ width }}</div>
    <button @click="fn()">按钮</button>
  </template>
  <script>
  import { reactive, ref, toRefs } from "vue";
  
  export default {
    setup() {
      // ref 用于创建响应式数据 返回是一个refimp对象
      let name = ref("李四");
      let age = ref(20);
  
      // reactive用于创建响应式对象、数组
      let other = reactive({
        height: 180,
        width: 100,
      });
  
      function fn() {
        // 响应式数据后需要value
        (name.value = "张三"), (age.value = 18), (other.height = 200);
        
      }
      // 返回一个对象:对象中的属性和方法才可以在template中直接使用
      // toRefs可以把响应式对象转换成独立的ref对象
      return { name, age, fn, ...toRefs(other) };
    },
  };
  </script>